function Index() {
  this.init();
  this.addListener();
}

//读者模板
Index.userTemplata = `
	<tr>
        <td class="userid"><%= _id %></td>
        <td class="username"><%= username %></td>
        <td class="userpsw"><%= password %></td>
        <td>
          <a href="#" class="updateuser" data-toggle="modal" data-target="#updateUserModal">修改</a>
          <a href="#" class="deleteuser">删除</a>
        </td>
      </tr>
`;

//图书模板
Index.bookTemplata = `
	<tr>
        <td class="bookid"><%= _id %></td>
        <td><img src="<%= logo %>" style="width: 50px;"/></td>
        <td><%= bookname %></td>
        <td><%= bookwriter %></td>
        <td><%= bookaomunt %></td>
        <td>
          <a href="#" class="update" data-toggle="modal" data-target="#addBookModal">修改</a>
          <a href="#" class="deletebook">删除</a>
        </td>
      </tr>
`;

//读者模板
Index.readerTemplata = `
	<tr>
        <td class="readerid"><%= _id %></td>
        <td class="readername"><%= readername %></td>
        <td class="readerbookname"><%= readerbookname %></td>
        <td class="readerstatus"><%= readerstatus %></td>
        <td>
          <a href="#" class="updatereader" data-toggle="modal" data-target="#updateReaderModal">修改</a>
          <a href="#" class="deletereader">删除</a>
        </td>
      </tr>
`;
$.extend(Index.prototype, {
  //初始化
  init() {
    if(!sessionStorage.username) {
      $(".manage-list").siblings().addClass("hidden");
    } else {
      $(".not-login").addClass("hidden").siblings().removeClass("hidden");
      $(".login-success a:first").html("欢迎：" + sessionStorage.username);
      $(".manage-list").siblings().removeClass("hidden");
    }
    //读取登录选项卡中值 选择首个选项卡显示
    var text = $(".denglu").text();
    if(text !== "") {
      $(".lock").hide();
      $(".lockmiss").removeClass("hidden");
    }
  },
  //添加事件监听
  addListener() {
    //进入用户管理界面
    $(".user-manage").on("click", $.proxy(this.toUserManage, this));
    //进入图书管理界面
    $(".book-manage").on("click", $.proxy(this.toBookManage, this));
    //进入读者管理界面
    $(".reader-manage").on("click", $.proxy(this.toReaderManage, this));
    //添加用户
    $(".btn-addUser").on("click", this.addUserHandler);
    //用户登录
    $(".btn-login").on("click", $.proxy(this.loginHandler, this));
    //用户注销
    $(".link-logout").on("click", $.proxy(this.logoutHandler, this));
    //添加图书
    $(".btn-addBook").on("click", this.addBook);
    //修改图书
    $(".btn-updateBook").on("click", $.proxy(this.bookupdateHandler, this))
    //添加读者
    $(".btn-addReader").on("click", this.addReader);
    //退出系统
    $(".exitsystem").on("click", this.exitSystemHandler);
    //
  },
  //退出系统
  exitSystemHandler() {
    sessionStorage.removeItem("username");
    location = "http://www.baidu.com/";
  },
  //显示用户管理界面
  toUserManage() {
    $(".user-interface").removeClass("hidden").siblings().addClass("hidden");
    //显示图书信息
    this.userRender(1);
    //获取用户信息
    $(".user-table tbody").on("click", ".updateuser", $.proxy(this.updateUserInfo, this));
    //删除用户
    $(".user-table tbody").on("click", ".deleteuser", this.deleteUser);
    //点击翻页
    $(".userpagination").on("click", "a", $.proxy(this.pageUserHandler, this));
  },
  //添加用户
  addUserHandler() {
    //获取添加的用户名和密码
    const data = $(".form-addUser").serialize();
    const url = "/api/users/register";
    $.post(url, data, (data) => {
      if(data.res_body.status === 1) {
        //关闭模态框
        $("#addUserModal").modal("hide");
        //清空表单
        //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
        $(".form-addUser input").val("");
      } else {
        $(".addUser-error").removeClass("hidden");
      }
    }, "json");
  },
  //用户登录
  loginHandler() {
    // 登录的用户名与密码
    const data = $(".form-login").serialize();
    // 请求API接口，实现用户名与密码验证
    const url = "/api/users/login";
    $.post(url, data, (data) => {
      if(data.res_body.status === 1) { // 登录成功
        // 保存登录成功的用户名
        sessionStorage.username = data.res_body.data.username;
        //关闭模态框
        $("#loginModal").modal("hide");
        //清空表单
        //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
        $(".form-login input").val("");
        //用户登录获得权限
        this.init();
        //this.toBookManage();
      } else { // 登录失败
        $(".login-error").removeClass("hidden");
      }
    }, "json");
  },
  //显示用户信息
  userRender(page) {
    //默认查询第一页数据
    page = page || 1;
    const url = "/api/users/check?page=" + page;
    //发起get请求，返回JSON数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        let html = "";
        data.res_body.list.forEach((curr) => {
          html += ejs.render(Index.userTemplata, curr);
        });
        $(".user-table tbody").html(html);
      }
    });
  },
  //用户翻页处理
  pageUserHandler() {
    var $src = $(event.target);
    const page = Number($src.text());
    this.userRender(page);
    $src.parents("li").addClass("active").siblings().removeClass("active");
  },
  //修改用户信息
  updateUserInfo(event) {
    //获取id
    $("#updateUserId").val($(event.target).parents("tr").find(".userid").text());
    //获取用户名
    $("#updateUserName").val($(event.target).parents("tr").find(".username").text());
    //获取用户密码
    $("#updateUserPassword").val($(event.target).parents("tr").find(".userpsw").text());
    //修改用户信息
    $("#updateUserModal").on("click", ".btn-updateUser", $.proxy(this.updateUser, this));
  },
  //请求修改
  updateUser() {
    //url
    const url = "/api/users/update";
    //向服务器发送数据
//	const data = new FormData($(".form-updateUser").get(0));
	const data = $(".form-updateUser").serialize();
    //发送请求
    $.ajax({
      type: "get", //必须使用post才能上传文件
      url: url,
      data: data,
      dataType: "json",
//    processData: false, //不将数据转换为查询字符串
//    contentType: false, //不是用默认的 "application/x-www-form-urlencoded") 
      success: (data) => {
        if(data.res_body.status === 1) {
          this.userRender($(".userpagination").find(".active").text());
          //关闭模态框
          $("#updateUserModal").modal("hide");
          //清空表单
          //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
          $(".form-updateUser input").val("");

        } else {
          //错误提示
          $(".updateUser-error").removeClass("hidden");
        }
      }
    });
  },
  deleteUser() {
    //获取id
    const id = $(this).parents("tr").find(".userid").text();
    //获取url
    const url = "/api/users/check?id=" + id;
    //请求数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        $(this).parents("tr").remove();
      }
    });
  },
  //用户注销
  logoutHandler() {
    sessionStorage.removeItem("username");
    $.getJSON("/api/users/logout", (data) => {
      if(data.res_body.status === 1) {
        location.reload();
      }
    });
  },
  //显示图书管理界面
  toBookManage() {
    $(".book-interface").removeClass("hidden").siblings().addClass("hidden");
    //显示图书信息
    this.bookRender(1);
    //删除图书
    $(".book-table tbody").on("click", ".deletebook", this.deleteBook);
    //点击修改按钮，将添加隐藏，修改显示
    $(".book-table tbody").on("click", ".update", function() {
      $(".btn-updateBook").css({
        "display": "block",
        "float": "right"
      });
      $(".btn-addBook").css({
        "display": "none"
      });
      const id = $(this).parents("tr").find(".bookid").text();
      $("#hiddenid").val(id);
    });
    $(".add-book").on("click", function() {
      $(".btn-updateBook").css({
        "display": "none"
      });
      $(".btn-addBook").css({
        "display": "block",
        "float": "right"
      });
    });
    var _this = this;
    $(".bookpagination").on("click", "a", function(event) {
      var $src = $(event.target);
      const page = Number($src.text());
      _this.bookRender(page);
      $src.parents("li").addClass("active").siblings().removeClass("active");
    });
  },
  //添加图书
  addBook() {
    //url
    const url = "/api/books/add";
    //向服务器发送数据
    const data = new FormData($(".form-addBook").get(0));
    //发送请求
    $.ajax({
      type: "post", //必须使用post才能上传文件
      url: url,
      data: data,
      dataType: "json",
      processData: false, //不将数据转换为查询字符串
      contentType: false, //不使用默认的 "application/x-www-form-urlencoded") 
      success: function(data) {
        if(data.res_body.status === 1) {
          //使用ejs模板
          const html = ejs.render(Index.bookTemplata, data.res_body.data);
          //显示
          $(".book-table tbody").append(html);
          //关闭模态框
          $("#addBookModal").modal("hide");
          //清空表单
          //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
          $(".form-addBook input").val("");
        } else {
          //错误提示
          $(".addBook-error").removeClass("hidden");
        }
      }
    });
  },
  //加载图书
  bookRender(page) {
    //默认查询第一页数据
    page = page || 1;
    const url = "/api/books/find_by_page?page=" + page;
    //发起get请求，返回JSON数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        let html = "";
        data.res_body.list.forEach((curr) => {
          html += ejs.render(Index.bookTemplata, curr);
        });
        $(".book-table tbody").html(html);
      }
    });
  },
  //修改图书
  bookupdateHandler(event) {
    const id = $("#hiddenid").val();
    const url = "/api/books/update";
    //向服务器发送数据
    const data = new FormData($(".form-addBook").get(0));
    //    console.log(data)
    $.ajax({
      type: "post", //必须使用post才能上传文件
      url: url,
      data: data,
      dataType: "json",
      processData: false, //不将数据转换为查询字符串
      contentType: false, //不是用默认的 "application/x-www-form-urlencoded") 
      success: (data) => {
        if(data.res_body.status === 1) {
          // const html = ejs.render(Index.bookTemplata, data.res_body.data);
          //显示
          // $(".book-table tbody").append(html);
          //关闭模态框
          $("#addBookModal").modal("hide");
          //清空表单
          //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
          $(".form-addBook input").val("");
          const pagen = $(".bookpagination").find(".active").text();
          console.log(pagen);
          this.bookRender(pagen);
        } else {
          //错误提示
          $(".addBook-error").removeClass("hidden");
        }
      }
    });
  },
  deleteBook() {
    //获取id
    const id = $(this).parents("tr").find(".bookid").text();
    //获取url
    const url = "/api/books/delete?id=" + id;
    //请求数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        $(this).parents("tr").remove();
      }
    });
  },
  //显示读者管理界面
  toReaderManage() {
    $(".reader-interface").removeClass("hidden").siblings().addClass("hidden");
    //显示读者信息
    this.readerRender(1);
    //获取读者信息
    $(".reader-table tbody").on("click", ".updatereader", $.proxy(this.updateReaderInfo, this));
    //删除读者
    $(".reader-table tbody").on("click", ".deletereader", this.deleteReader);
    //点击翻页
    $(".readerpagination").on("click", "a", $.proxy(this.pageReaderHandler, this));
  },
  //添加读者
  addReader() {
    //url
    const url = "/api/readers/add";
    //向服务器发送数据
    const data = new FormData($(".form-addReader").get(0));
    //发送请求
    $.ajax({
      type: "post", //必须使用post才能上传文件
      url: url,
      data: data,
      dataType: "json",
      processData: false, //不将数据转换为查询字符串
      contentType: false, //不是用默认的 "application/x-www-form-urlencoded") 
      success: function(data) {
        if(data.res_body.status === 1) {
          //使用ejs模板
          const html = ejs.render(Index.readerTemplata, data.res_body.data);
          //显示
          $(".reader-table tbody").append(html);
          //关闭模态框
          $("#addReaderModal").modal("hide");
          //清空表单
          //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
          $(".form-addReader input").val("");
        } else {
          //错误提示
          $(".addReader-error").removeClass("hidden");
        }
      }
    });
  },
  //加载读者
  readerRender(page) {
    //默认查询第一页数据
    page = page || 1;
    const url = "/api/readers/find_by_page?page=" + page;
    //发起get请求，返回JSON数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        let html = "";
        data.res_body.list.forEach((curr) => {
          html += ejs.render(Index.readerTemplata, curr);
        });
        $(".reader-table tbody").html(html);
      }
    });
  },
  //读者翻页处理
  pageReaderHandler() {
    var $src = $(event.target);
    const page = Number($src.text());
    this.readerRender(page);
    $src.parents("li").addClass("active").siblings().removeClass("active");
  },
  updateReaderInfo() {
    //获取读者id
    $("#updateReaderid").val($(event.target).parents("tr").find(".readerid").text());
    //获取读者名
    $("#updateReadername").val($(event.target).parents("tr").find(".readername").text());
    //获取读者借阅书名
    $("#updateReaderbookname").val($(event.target).parents("tr").find(".readerbookname").text());
    //获取读者信誉状态
    $("#updateReaderstatus").val($(event.target).parents("tr").find(".readerstatus").text());
    //修改用户信息
    $("#updateReaderModal").on("click", ".btn-updateReader", $.proxy(this.updateReader, this));
  },
  updateReader() {
    //url
    const url = "/api/readers/update";
    //向服务器发送数据
    const data = new FormData($(".form-updateReader").get(0));
    //发送请求
    $.ajax({
      type: "post", //必须使用post才能上传文件
      url: url,
      data: data,
      dataType: "json",
      processData: false, //不将数据转换为查询字符串
      contentType: false, //不是用默认的 "application/x-www-form-urlencoded") 
      success: (data) => {
        if(data.res_body.status === 1) {
          this.readerRender($(".readerpagination").find(".active").text());
          //关闭模态框
          $("#updateReaderModal").modal("hide");
          //清空表单
          //$(".form-add-pos").reset();方法是伴随着$(".form-add-pos").submit();方法使用的
          $(".form-updateReader input").val("");
        } else {
          //错误提示
          $(".updateReader-error").removeClass("hidden");
        }
      }
    });
  },
  //删除读者
  deleteReader() {
    //获取id
    const id = $(this).parents("tr").find(".readerid").text();
    //获取url
    const url = "/api/readers/delete?id=" + id;
    //请求数据
    $.getJSON(url, (data) => {
      if(data.res_code === 1) {
        $(this).parents("tr").remove();
      }
    });
  },
});
new Index();